<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.subject{
				position:fixed;
				right:100px;
				height:100px;
			}
			.subject div{
				width:100px;
				text-align: center;
			}
			.subject div a{
				text-decoration: none;
				color:black;
			}
			
			.pic{
				width:300px;
				height:200px;
			}
			.btn{
				overflow: hidden;
			}
			.btn div{
				float:left;
				width:70px;
				height:30px;
				line-height: 30px;
				text-align: center;
				margin-right:30px;
				background:skyblue;
			}
			.close1{
				animation:close2 1s linear forwards;
			}
			.open1{
				animation:open2 1s linear forwards;
			}
			@keyframes close2{
				0%{height:200px}
				100%{height:0px;}
			}
			@keyframes open2{
				0%{height:0px}
				100%{height:200px;}
			}
		</style>
	</head>
	<body>
		<div class="subject">
			<div><a href="index.html">图片收起展开</a></div>
			<div><a href="task2.html">回到顶部</a></div>
			<div><a href="task3.html">选项卡</a></div>
		</div>
		<img class="pic" src="img/timg (1).jpg" />
		<div class="btn">
			<div class="close">收齐</div>
			<div class="open">展开</div>
			<div class="toggles">切换</div>
		</div>
		<script>
			var	close = document.getElementsByClassName("close")[0];
			var open = document.getElementsByClassName("open")[0];
			var toggles = document.getElementsByClassName("toggles")[0];
			var pic = document.getElementsByClassName("pic")[0];
			var open1 = true;
			close.addEventListener("click",function(){
				pic.classList.add("close1");
				pic.classList.remove("open1");
				open1=false;
			})
			open.addEventListener("click",function(){
				pic.classList.add("open1");
				pic.classList.remove("close1");
				open1 = true;
			})
			toggles.addEventListener("click",function(){
				
//				console.log(this.classList.contains("open1"))
				if(open1){
					open1=false;
					pic.classList.remove("open1");
					pic.classList.add("close1");
				}else{
					open1 = true;
					pic.classList.remove("close1");
					pic.classList.add("open1");
					
				}
			})
		</script>
	</body>
</html>
